<!DOCTYPE html>
<html>
	<head>
		<title>Hover Zoom Options</title>
		<style type="text/css">
			body { padding: 0; background: white; color: black; font-family: Arial,sans-serif}
			p { text-align:left; padding:0 0 0.5em; font-size: 10pt; margin: 0 }
			hr { height: 0; border-style: none; border-top: 1px solid #bbb; margin: 0.7em }
			#body { margin: 0 auto; width: 40em; }
			#container {float: left; margin: 1em;}
			#icon { float: left; margin-top: 2em }
			#options { border: 1px solid #bbb; margin-bottom: 1em; padding: 1em; border-radius: 4px; background-color: #f2f2f2; }
			#title { font-size: 1.5em }
			h2 { font-size: 0.8em; border-bottom: 1px solid #bbb }
			#messages { padding: 1em; max-width: 18em; height: 3em; }
			#saved { display: none; background-color: #ffd; padding:.5em; }
			#saved p { font-size: 9pt; }
			#title, #buttons, #about p, #messages p { text-align: center }
			#delays p, #delays input { text-align: right }
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="common.js"></script>
		<script>
			var options;
			
			function getMilliseconds(ctrl) {
				var value = parseFloat(ctrl.val());
				value = isNaN(value) ? 0 : value * 1000;
				ctrl.val(value / 1000);
				return value;
			}
		
			// Saves options to localStorage.
			function saveOptions() {
				options.extensionEnabled = $('#chkExtensionEnabled')[0].checked;
				options.pageActionEnabled = $('#chkPageActionEnabled')[0].checked;
				options.showCaptions = $('#chkShowCaptions')[0].checked;
				options.actionKey = $('#radActionKeyOn')[0].checked ? parseInt($('#selActionKey').val()) : 0;
				options.addToHistory = $('#chkAddToHistory')[0].checked;
				options.displayDelay = getMilliseconds($('#txtDisplayDelay'));
				options.fadeDuration = getMilliseconds($('#txtFadeDuration'));
				
				localStorage.options = JSON.stringify(options);
				enableControls(false);
				sendOptions(options);
				$('#saved').clearQueue().fadeIn(100).delay(5000).fadeOut(600);			
			}

			// Restores options from localStorage.
			function restoreOptions() {
				options = loadOptions();
								
				$('#chkExtensionEnabled')[0].checked = options.extensionEnabled;
				$('#chkPageActionEnabled')[0].checked = options.pageActionEnabled;
				$('#chkShowCaptions')[0].checked = options.showCaptions;
				$('#radActionKeyOff')[0].checked = options.actionKey == 0;
				$('#radActionKeyOn')[0].checked = options.actionKey != 0;
				$('#chkAddToHistory')[0].checked = options.addToHistory;
				$('#txtDisplayDelay').val((options.displayDelay || 0) / 1000);
				$('#txtFadeDuration').val((options.fadeDuration || 0) / 1000);
				
				var selActionKey = $('#selActionKey')[0];
				for (i=0; i<selActionKey.options.length; i++) {
					console.log(selActionKey.options[i].value);
					if (selActionKey.options[i].value == options.actionKey) {
						selActionKey.options[i].selected = true;
					}
				}
				
				enableControls(false);
			}
			
			function enableControls(enabled) {
				enabled = enabled || false;
				$('button').attr('disabled', !enabled);
				$('#selActionKey')[0].disabled = $('#radActionKeyOn')[0].checked ? '' : 'disabled';
			}
			
			function onRequest(request, sender, callback) {
				switch(request.action) {
					case 'optionsChanged':
						restoreOptions();
						break;				
				}
			}		
			
			$(function() {
				$('input, select').change(enableControls).keydown(enableControls);
				$('#btnSave').click(saveOptions);
				$('#btnReset').click(restoreOptions);
				restoreOptions();
				chrome.extension.onRequest.addListener(onRequest);
			});
		</script>
	</head>
	<body>
		<div id="body">
			<img id="icon" src="images/icon128.png">
			<div id="container">
				<h1 id="title">Hover Zoom Options</h1>
				<div id="options">
					<p><input type="checkbox" id="chkExtensionEnabled"> <label for="chkExtensionEnabled">Enable extension</label></p>
					<h2>View</h2>
					<p><input type="checkbox" id="chkPageActionEnabled"> <label for="chkPageActionEnabled">Show extension icon in address bar</label></p>
					<p><input type="checkbox" id="chkShowCaptions"> <label for="chkShowCaptions">Show pictures captions</label></p>
					<h2>Action key</h2>
					<p><input type="radio" id="radActionKeyOn" name="radActionKey" value="1"> <label for="radActionKeyOn">Only show pictures if a key is held down:</label>
					<select id="selActionKey">
						<option value="16">Shift</option>
						<option value="17">Ctrl</option>
					</select>
					</p>
					<p><input type="radio" id="radActionKeyOff" name="radActionKey" value="0"> <label for="radActionKeyOff">Always show pictures</label></p>
					<h2>Delays</h2>
					<div id="delays">
					<p><label for="txtDisplayDelay">Delay before displaying a picture</label>: <input type="textbox" id="txtDisplayDelay" size="1"> sec.</p>
					<p><label for="txtFadeDuration">Fading animation duration</label>: <input type="textbox" id="txtFadeDuration" size="1"> sec.</p>
					</div>
					<h2>Advanced</h2>
					<p><input type="checkbox" id="chkAddToHistory"> <label for="chkAddToHistory">Add viewed pictures to the browser's history</label></p>
				</div>
				<div id="buttons">
					<button id="btnSave">Save</button>
					<button id="btnReset">Reset</button>
				</div>
				<div id="messages">
					<div id="saved"><p>Options saved.<br>Some settings may need a page refresh.</p></div>
				</div>
				<div id="about">
					<p><a href="http://code.google.com/p/romanito/wiki/HoverZoom">Home page</a> - <a href="http://code.google.com/p/romanito/issues/entry">Report a bug</a> - 
					<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FHover-Zoom%2F121453051234637&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;colorscheme=light&amp;height=21&amp;ref=options_page" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px; vertical-align: middle;" allowTransparency="true"></iframe>
					</p>
					<p>&copy; 2010 Romain Vallet</p>
				</div>
			</div>
		</div>
	</body>
</html>